// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import "Language.js"  as Language
import "userDatabase.js" as UserList

Rectangle {
    id: parentRect
    width: 1280
    height: 720
    color: "#bfbfbf"

    property string langID: Language.getLangID();

    function fillUsers()
    {
        removeAll();
        UserList.makeList(userListModel);
    }
    function removeAll()
    {
        userListModel.clear();
    }

    function removeUser(index)
    {
        userListModel.remove(index);
        UserList.removeUser(index);
    }
    function addUser(){
        UserList.addUser(addUserInput.text);
        fillUsers();
    }

    Rectangle {
        id: leftNav
        x: 10
        y: 50
        width: 323
        height: parent.height - 150
        color: "#00000000"
        border.width: 5
        radius: 5
        border.color: "black"

        ListView {
            id: settingsList
            x: 10
            y: 10
            width: parent.width
            height: parent.height
            interactive: false
            flickDeceleration: 0
            maximumFlickVelocity: 0
            boundsBehavior: Flickable.StopAtBounds
            model: xmlSettingsModel
            delegate: Item {
                x: 5
                height: 100
                MouseArea{
                    x:0;y:0
                    height: parent.height; width:323
                    onClicked: {parentRect.state=name;if(name=="Users") fillUsers();}
                }
                Row {
                    spacing: 40
                    Image {
                        width: 48
                        height: 48
                        smooth: true
                        source: image
                    }

                    Text {
                        text: {
                            if(Language.getLangID() == 1)
                                name
                            else if(Language.getLangID() == 2)
                                name_es
                        }

                        anchors.verticalCenter: parent.verticalCenter
                        font.pixelSize: 36
                        font.bold: true
                    }
                }
            }
        }
    }


    Rectangle {
        id: mainContent
        x: 350
        y: 20
        width: 917
        height: 652
        color: "#00000000"
        radius: 5
        border.width: 5
        border.color: "#000000"


        Rectangle {
            id: removeAllSettings
            x: 881
            y: 455
            width: 380
            height: 110
            color: "#FF0033"
            opacity: 0
            radius:5
            Text{
                text: {if(Language.getLangID() == 1) qsTr("RESTORE DEFAULTS"); else qsTr("RESTAURACIÓN DE VALORES");}
                color:"white"
                font.pixelSize: if(Language.getLangID() == 2) 28; else 32
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
            }

            MouseArea{
                x:0;y:0;height:parent.height;width:parent.width;
                onClicked:{console.log("reset all clicked");}
            }
        }
        Rectangle {
            id: aboutFill
            x: 39
            y: 60
            width: 840
            height: 532
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            color: "#00000000"
            opacity: 0
            Text{
                id: aboutText
                text: "Dan\nWestin\nMichal\nDean"
                font.bold: true
                font.pixelSize: 60
                x:10;y:10
            }
        }
        Image{
            id:volumeImage
            source:"Assets/settings/volume.png"
            height:48;width:48
            x: 18;y: 21
            smooth:true;
            opacity:0
        }
        Rectangle{
            id:globalMute
            x: 79
            y: 100
            color:"red"
            radius: 5
            width:250;height:70
            opacity:0
            MouseArea{
                x:0;y:0;height:parent.height;width:parent.width;
                onClicked:{globalMute.color = "red" ? globalMute.color="green"  : globalMute.color="red";}
            }

            Image {
                id: muteImage
                x: 0
                y: 13
                width: 48
                height: 48
                source: "Assets/settings/mute.png"
                smooth: true
            }

            Text {
                id: muteText
                x: 58
                y: 22
                width: 192
                height: 29
                text: qsTr("Mute All")
                horizontalAlignment: Text.AlignHCenter
                color: "white"
                font.pixelSize: 24
            }
        }

        Rectangle {
          id: volumeSlider;
          x: 79
          y: 30
          width: 812
          height: 30
          anchors.horizontalCenterOffset: 26
          anchors.verticalCenterOffset: -281
          anchors.centerIn: parent
          property int value: Math.round(handle.x*100/(volumeSlider.width-handle.width))
          color: "blue"
          opacity:0
          Rectangle {
            y:-15
            id: handle; width: 25; height: 60
            color: "gray"
            MouseArea {
              anchors.fill: parent
              drag.target: parent; drag.axis: "XAxis"
              drag.minimumX: 0; drag.maximumX: volumeSlider.width - handle.width
            }
          }
        }

        Rectangle {
          id: brigthnessSlider;
          x: 79
          y: 30
          width: 812
          height: 30
          anchors.horizontalCenterOffset: 26
          anchors.verticalCenterOffset: -281
          anchors.centerIn: parent
          color: "blue"
          opacity:0
          Rectangle {
            y:-15
            id: handle2; width: 25; height: 60
            color: "gray"
            MouseArea {
              anchors.fill: parent
              drag.target: parent; drag.axis: "XAxis"
              drag.minimumX: 0; drag.maximumX: brigthnessSlider.width - handle2.width
            }
          }
        }
        ListView {
            id: languageList
            x: 0
            y: -500
            width: parent.width
            height: 652
            model: xmlSettingsModel
            opacity: 0
            delegate: Item {
                x: 5
                height: 100
                MouseArea{
                    x:0;y:0
                    height: parent.height; width:323
                    onClicked: {
                        if(language == "English")
                        {
                            Language.setLangID(1);
                            langID="1";
                        }
                        else if(language == "Spanish")
                        {
                            Language.setLangID(2);
                            langID="2";
                        }
                        xmlSettingsModel.reload();
                    }
                }
                Row {
                    spacing: 10
                    Image {
                        width: 48
                        height: 48
                        smooth: true
                        source: flagimg
                    }
                    Text {
                        text: language
                        anchors.verticalCenter: parent.verticalCenter
                        font.pixelSize: 36
                        font.bold: true
                    }
                }
            }
        }
   Item{
       opacity:0
       id:langOver1
       width:200;height:100;
        Image {
            width: 48
            height: 48
            smooth: true
            source: "Assets/settings/serbia.png"
        }
        Text {
            id: text2
            text: "Serbian"
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 36
            font.bold: true
        }
   }
   Item{
       opacity:0
       x:50;y:50
       height:50;width:100
       id:langOver2
        Image {
            width: 48
            height: 48
            smooth: true
            source: "Assets/settings/china.png"
        }
        Text {
            id: text1
            text: "Chinese"
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 36
            font.bold: true
        }
   }
   Item{
       opacity:0
       x:100;y:100;
       id:langOver3
        Image {
            width: 48
            height: 48
            smooth: true
            source: "Assets/settings/japan.png"
        }
        Text {
            id: text3
            text: "Japanese"
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 36
            font.bold: true
        }
   }
    Rectangle{
        id:syncImages
        opacity:0
        Image {
            id: exchangeImage
            x: 31
            y: 325
            width: 100
            height: 100
            smooth: true
            source: "Assets/settings/exchange.png"
        }

        Image {
            id: homegroupImage
            x: 31
            y: 483
            width: 100
            height: 100
            smooth: true
            source: "Assets/settings/homegroup.png"
        }

        Image {
            id: googleImage
            x: 31
            y: 167
            width: 100
            height: 100
            smooth: true
            source: "Assets/settings/google.png"
        }

        Image {
            id: itunesImage
            x: 31
            y: 29
            width: 100
            height: 100
            smooth: true
            source: "Assets/settings/itunes.png"
        }
        Rectangle{
            x: 172
            y: 189
            width: 318
            height: 70
            border.width:3
            border.color: "black"
            TextEdit {
                x:5;y:0;width:parent.width;height:parent.height
                id: gmailUser
                text: qsTr("UserName")
                font.pixelSize: 48
            }
        }
        Rectangle{
            x: 530
            y: 189
            width: 349
            height: 70
            border.width: 3
            border.color: "black"
            TextEdit {
                x:5;y:0;width:parent.width;height:parent.height
                id: gmailPassword
                text: qsTr("Password")
                font.pixelSize: 48
            }
        }

        Rectangle{
            x: 172
            y: 352
            width: 318
            height: 70
            border.width:3
            border.color: "black"
            TextEdit {
                x:5;y:0;width:parent.width;height:parent.height
                id: exchangeUsername
                text: qsTr("UserName")
                font.pixelSize: 48
            }
        }
        Rectangle{
            x: 530
            y: 352
            width: 349
            height: 70
            border.width: 3
            border.color: "black"
            TextEdit {
                x:5;y:0;width:parent.width;height:parent.height
                id: exchangePassword
                text: qsTr("Password")
                font.pixelSize: 48
            }
            Rectangle{
                x: -358
                y: 149
                width: 550
                height: 70
                border.width: 3
                border.color: "black"
                TextEdit {
                    x:5;y:0;width:parent.width;height:parent.height
                    id: homeGroupName
                    text: qsTr("HomeGroup Name")
                    font.pixelSize: 48
                }
            }
            Rectangle{
                x: -369
                y: -308
                width: 550
                height: 70
                border.width: 3
                border.color: "black"
                TextEdit {
                    x:5;y:0;width:parent.width;height:parent.height
                    id: itunesPin
                    text: qsTr("iTunes Pin")
                    font.pixelSize: 48
                }
            }


        }
        TextEdit {
            id: text_edit1
            x: 0
            y: 0
            width: 723
            height: 20
            text: qsTr("Double Tap Icons to Save and Connect.")
            color: "red"
            font.pixelSize: 36
        }
    }
    Rectangle {
      id: container
      width: parent.width - 25; height: 500
      color: "#00000000"
      opacity:0
      Component {
        id: delegate
        Item {
          id: userItem
          width: parent.width; height: 80
          Rectangle{
              id: userRect
              width:parent.width; height:80;color: "#00000000"
              Image {
                height: 75; width: 75;
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                source: "Assets/Login/guy.png"
              }
              Text {
                x: 100
                text: userName
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 36
                font.bold: true

              }
              Image{
                  id: removeUserImag
                  anchors.verticalCenter: parent.verticalCenter
                  source:"Assets/Login/removeuser.png"
                  height: 75
                  anchors.right: parent.right
                  width:75
                  smooth: true
                  visible: true
                  MouseArea{
                      x:0
                      y:0
                      width:parent.width
                      height: parent.height
                      onClicked: {removeUser(index);userListModel.reload();}
                  }
              }
            }
        }

      }
      ListView {
        id: view
        width: 917
        height: 630
        anchors.bottomMargin: -130
        interactive: false
        anchors.fill: parent
        model: userListModel
        delegate: delegate
      }
      ListModel {
        id: userListModel
      }
    }

    Rectangle {
        id: trainUserRect
        x: 58
        y: 305
        width: 500
        height: 200
        color: "#00000000"
        opacity: 0

        Image {
            id: image2
            x: 0
            y: -144
            width: 100
            height: 100
            source: ""
            opacity: 1
        }
        Text{
            id: text5
            text: { console.log(""+Language.getLangID());if(Language.getLangID() == 1)"Train Face Recognition"; else "Reconocimiento de Cara"; }
        }
    }

    Image {
        id: image1
        x: 19
        y: 40
        width: 100
        height: 100
        source: ""
        opacity: 0
    }


 }
    Rectangle{
        id: addRect
        width:300
        height:100
        anchors.bottom: parent.bottom
        color:"#00000000"
        opacity: 0
        Rectangle{
            id:images
            x:0;y:0
            height:parent.height
            color: "#00000000"
            width:parent.width
            Image{
                id: addUserImage
                x: 30
                y: 13
                source:"Assets/Login/newuser.png"
                height: 75
                width:75
                smooth: true
                visible: true
                MouseArea{
                    x:0
                    y:0
                    width:parent.width
                    height: parent.height
                    onClicked: {acceptUserRect.visible=true;acceptUserRect.opacity=1;}
                }
            }

        }
        Rectangle{
            id: acceptUserRect
            x: 280
            y: 0
            height: parent.height
            color: "#00000000"
            width: 48
            opacity: 0
            TextInput{
                id: addUserInput
                x: -245
                y: 26
                width: 250
                height: 50
                text: qsTr("text here")
                horizontalAlignment: TextInput.AlignHCenter
                font.pixelSize: 24
            }

            Image{
                x: 0
                y: 26
                source: "Assets/Login/okay.png"
            }

            MouseArea{
                id: acceptUserClick
                width:parent.width
                height: parent.height
                onClicked:{addUser();images.visible=true;acceptUserRect.opacity=0;}
            }
        }
    }
    XmlListModel {
        id: xmlSettingsModel
        source: "Assets/settings/data.xml"
        query: "/system/note"
        XmlRole { name: "name"; query: "name/string()" }
        XmlRole { name: "name_es"; query: "name_es/string()" }
        XmlRole { name: "image"; query: "image/string()" }
        XmlRole { name: "language"; query: "language/string()" }
        XmlRole { name: "flagimg"; query: "flagimg/string()" }
    }
    states: [
        State {
            name: "Users"
            PropertyChanges{
                target: container
                opacity: 1
            }
            PropertyChanges {
                target: acceptUserRect
                opacity:0
            }

            PropertyChanges {
                target: addRect
                x: 343
                y: 543
                opacity: 1
                anchors.bottomMargin: 77
            }

            PropertyChanges {
                target: view
                x: 15
                y: 10
                anchors.topMargin: 10
                anchors.rightMargin: -15
                anchors.bottomMargin: -140
                anchors.leftMargin: 15
            }

            PropertyChanges {
                target: trainUserRect
                opacity: 0
            }
        },
        State {
            name: "Sync"
            PropertyChanges{
                target: syncImages
                opacity: 1
            }

            PropertyChanges {
                target: text_edit1
                x: 172
                y: 597
            }

            PropertyChanges {
                target: trainUserRect
                opacity: 0
            }
        },
        State {
            name: "Sound"

            PropertyChanges {
                target: volumeSlider
                opacity: 1
            }

            PropertyChanges {
                target: volumeImage
                opacity:1
            }

            PropertyChanges {
                target: globalMute
                opacity:1
            }

            PropertyChanges {
                target: trainUserRect
                opacity: 0
            }
        },
        State {
            name: "Language"

            PropertyChanges {
                target: languageList
                x: 12
                y: -566
                height: 1133
                flickDeceleration: 1752
                orientation: "Vertical"
                boundsBehavior: "StopAtBounds"
                interactive: false
                opacity: 1
            }
            PropertyChanges {
                target: langOver1
                x: 590
                y: 120
                height: 50
                opacity:1
            }

            PropertyChanges {
                target: langOver2
                x: 591
                y: 30
                width: 199
                height: 50
                opacity:1
            }

            PropertyChanges {
                target: langOver3
                x: 590
                y: 225
                width: 200
                height: 50
                opacity:1
            }

            PropertyChanges {
                target: text1
                x: 58
                y: 3
                anchors.verticalCenterOffset: 0
            }

            PropertyChanges {
                target: text2
                x: 57
                y: 3
                anchors.verticalCenterOffset: 0
            }

            PropertyChanges {
                target: text3
                x: 57
                y: 3
                anchors.verticalCenterOffset: 0
            }

            PropertyChanges {
                target: trainUserRect
                opacity: 0
            }
        },
        State {
            name: "System"
            PropertyChanges {
                target: brigthnessSlider
                opacity:1

            }
            PropertyChanges {
                target: removeAllSettings
                x: 18
                y: 267
                width: 380
                opacity:1
            }

            PropertyChanges {
                target: image1
                x: 6
                y: 15
                width: 60
                height: 60
                smooth: true
                source: "Assets/settings/brightness.png"
                opacity: 1
            }

            PropertyChanges {
                target: mainContent
                smooth: true
            }

            PropertyChanges {
                target: image2
                x: 8
                y: 5
                width: 100
                height: 100
                smooth: true
                source: "Assets/settings/trainuser.png"
                opacity: 1
            }

            PropertyChanges {
                target: trainUserRect
                x: 18
                y: 112
                width: 380
                height: 110
                radius: 3
                color: "#5D92B1"
                opacity:1
            }

            PropertyChanges {
                target: text5
                x: 108
                y: 41
                font.pointSize: 18
            }

            PropertyChanges {
                target: volumeImage
                opacity: 0
            }
        },
        State {
            name: "About"
            PropertyChanges {
                target: aboutFill
                opacity:1

            }

            PropertyChanges {
                target: trainUserRect
                opacity: 0
            }

        }
    ]

}
//Westin
